import React, { Component } from "react";
import { NavLink, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Header from "./pages/Header";
import "./App.css";
import "./reset.css";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <div className="header">
          <Header />
        </div>
        <div className="content-div-box">
          <div className="sidebar-box">
            {/* 在react中靠路由链接实现切换组件---编写组件 */}
            <NavLink activeClassName="active" className="item-li"  to="/about">
              about
            </NavLink>
            <NavLink activeClassName="active" className="item-li" to="/home">
              Home
            </NavLink>
          </div>
          <div className="app-content-box">
            {/* 注册路由 */}
            <Route path="/about" component={About} />
            <Route path="/home" component={Home} />
          </div>
        </div>
      </div>
    );
  }
}
